<template>
  <div class="box1"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { three, CylinderApi, CuboidApi, fn } from "./APP.js";
import { mergeBufferGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";

// import {} from "three/examples/jsm/utils/BufferGeometryUtils.js";
// 添加轨道控制器扩展库
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 引入three.js
import * as THREE from "three";
// l;
// const sum = ref(null);

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
// 设置canvas画布尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 将画布部署到html元素上

// 背景颜色
renderer.setClearColor(0x444444, 1);

renderer.setPixelRatio(window.devicePixelRatio);

onMounted(() => {
  // ---------------------------------------------------------------------三维场景-------------------------------
  // 创建三维场景
  const scene = new THREE.Scene();

  //
  //第一种
  const random = () => {
    var randomNum = Math.floor(Math.random() * 1000) + 1;
    return randomNum;
  };
  // 颜色随机数
  function colorRandom() {
    let colorRGB = Math.floor(Math.random() * 255) + 1;
    return colorRGB;
  }
  console.log(colorRandom());
  // 颜色
  function colorApi() {
    let color = new THREE.Color(
      `rgb(${colorRandom()}, ${colorRandom()}, ${colorRandom()})`
    );
    return color;
  }
  console.log(colorApi());

  // 创建随机材质
  let material;
  let i = 1;
  // 10种材质不同颜色
  function materialApi() {
    // i = 9;
    if (i <= 3) {
      switch (i) {
        case 1:
          // 基础网格材质
          material = new THREE.MeshBasicMaterial({ color: colorApi() });
          i += 1;
          break;
        case 2:
          // 基础线条材质
          material = new THREE.LineBasicMaterial({ color: colorApi() });
          i += 1;
          break;
        case 3:
          material = new THREE.LineDashedMaterial({ color: colorApi() });
          i += 1;
          break;
        case 4:
          material = new THREE.MeshDepthMaterial({ color: colorApi() });
          i += 1;
          break;
        case 5:
          material = new THREE.MeshStandardMaterial({ color: colorApi() });
          i += 1;
          break;
        case 6:
          material = new THREE.MeshLambertMaterial({ color: colorApi() });
          i += 1;
          break;
        case 7:
          material = new THREE.MeshMatcapMaterial({ color: colorApi() });
          i += 1;
          break;
        case 8:
          material = new THREE.MeshNormalMaterial({ color: colorApi() });
          i += 1;
          break;
        case 9:
          material = new THREE.MeshPhongMaterial({ color: colorApi() });
          i += 1;
          break;
        case 10:
          material = new THREE.MeshPhysicalMaterial({ color: colorApi() });
          i += 1;
          break;
      }
    } else {
      i = 1;
      materialApi();
    }
  }
  // 基础网格材质
  // var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

  function addCube() {
    var geometry = new THREE.BoxGeometry(10, 10, 10);
    // var geometry = new THREE.SphereGeometry(10);
    geometry.translate(random(), random(), random());
    var cube = new THREE.Mesh(geometry, material);
    return cube;
  }
  let geometryArray = []; // 将你的要合并的多个geometry放入到该数组
  let materialArray = []; // 将你的要赋值的多个material放入到该数组
  // console.time();
  let index = 0;
  while (index < 50000) {
    var cube = addCube(); //创建了一个随机位置的几何体模型
    materialApi();

    // console.log(material); //材质
    // console.log(colorApi()); //颜色

    cube.updateMatrix(); //手动更新模型的矩阵
    // scene.add(cube);
    geometryArray.push(cube.geometry); // 将你的要合并的多个geometry放入到该数组
    materialArray.push(material); // 将你的要赋值的多个material放入到该数组

    // geometry.merge(cube.geometry, cube.matrix); //将几何体合并
    // console.log(material);
    index++;
  }
  const mergedGeometries = mergeBufferGeometries(geometryArray, true);
  const singleMergeMesh = new THREE.Mesh(mergedGeometries, materialArray);

  scene.add(singleMergeMesh); // 在场景中添加合并后的mesh(模型)

  // console.timeEnd();
  // scene.add(new THREE.Mesh(geometry, material));
  //第二种
  // let index;
  // console.time();
  // while (index < 100000) {
  //   var cube = addCube(); //创建了一个随机位置的几何体模型
  //   // scene.add(cube);
  //   index++;
  // }
  // console.timeEnd();
  // // //

  // let geometryArray = []; // 将你的要合并的多个geometry放入到该数组
  // let materialArray = []; // 将你的要赋值的多个material放入到该数组
  // // 合并模型
  // const mergedGeometries = BufferGeometryUtils.mergeBufferGeometries(
  //   geometryArray,
  //   true
  // );
  // const singleMergeMesh = new THREE.Mesh(mergedGeometries, materialArray);
  // scene.add(singleMerge); // 在场景中添加合并后的mesh(模型)

  //
  //
  document.querySelector(".box1").appendChild(renderer.domElement);
  // --------------------------------------------------------------------相机--------------------------------
  // // 创建光源
  // const pointLight = new THREE.PointLight(0xffffff, 5, 0, 0);
  // // 设置光源位置
  // pointLight.position.set(-8, 20, 20);
  // scene.add(pointLight);

  // // 光源辅助观察,显示光源位置
  // const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2);
  // scene.add(pointLightHelper);
  // 平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 6);
  // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
  directionalLight.position.set(-300, 1000, 1200);
  // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
  // directionalLight.target = mesh;
  scene.add(directionalLight);

  // DirectionalLightHelper：可视化平行光
  const dirLightHelper = new THREE.DirectionalLightHelper(
    directionalLight,
    3,
    0x00ff00
  );
  // 将辅助观察添加到网格scene
  scene.add(dirLightHelper);
  // // ---------------------------------------------------------------------------------------------------
  // 环境光:没有特定方向，整体改变场景的光照明暗
  const ambient = new THREE.AmbientLight("#f6f7f6", 0.8);
  scene.add(ambient);

  // 实例化透视投影相机
  // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
  const camera = new THREE.PerspectiveCamera(
    30,
    window.innerWidth / window.innerHeight,
    0.1,
    5000
  );
  // 设置相机位置
  camera.position.set(180, 180, 200);
  // 设置相机观察目标
  camera.lookAt(0, 0, 0);
  // --------------------------------------------------------------------渲染器----------------------------------

  // --------------------------------------------------------------------辅助坐标系------------------------------
  // 添加辅助坐标系
  const axesHelper = new THREE.AxesHelper(200);
  // 将坐标系添加到场景中
  scene.add(axesHelper);
  // ------------------------------------------------------------------轨道控制器-------------------------------
  // 设置轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  // 设置带阻尼的惯性
  // controls.enableDamping = true; //鼠标松开不会立刻停下来
  // 设置阻尼系数
  // controls.dampingFactor = 0.05;
  // ----------------------------------------------------------渲染函数-----------------------------------
  window.addEventListener("resize", () => {
    // 重置渲染器宽高比
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
  });

  // 构建渲染函数
  function animate() {
    // 侦听轨道控制器
    controls.update();
    // 请求动画帧函数,辅助实现WebGPU的动画效果
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
});
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
